/**custom**/

@image: ~"@{css-prefix}image";
@image-mask: ~"@{css-prefix}image-mask";
@image-wrap: ~"@{css-prefix}mask-wrap";


.@{image} {
  width: 120px;
  height: auto;
  &:hover {
    cursor: pointer;
  }
}


.@{image-mask} {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  .@{image-wrap} {
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    &-choseBtn {
      position: absolute;
      top: 70px;
      right: 70px;
      z-index: 9999;

    }
  .sh-mask-wrap-drag {
    width:100%;
    height: 100%;
    position: absolute; 
    top: 0;
    left: 0;   
    .sh-mask-wrap-imgbox {
        transition: All 0.4s ease-in-out;
        width:100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .sh-mask-wrap-img {
          transition: All 0.4s ease-in-out;
          // width: auto;
          // height: auto;
        }
        .sh-mask-img-full {
          max-height: 100%;
          max-width: 100%;
        }
      }
    }
    i {
      color: #000;
    }
    i:hover {
      color: #fff;
    }

    &-tools {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 300px;
      height: 50px;
      bottom: 70px;
      left: 50%;
      transform: translate(-50%);
      color: @placeholder-color;
      background-color: rgba(0, 0, 0, 1);
      border-radius: 25px;
      span {
        cursor: pointer;
        user-select: none;
        
        i {
          color: #666;
        }
        i:hover {
          color: #fff;
        }
      }
    }
    &-prev, &-next {
      position: absolute;
      cursor: pointer;
    }
    &-prev {
      left: 70px;
    }
    &-next {
      right: 70px;
    }

  }
}
